<template>
  <dragger @getData="getData"
           @delete-area="$emit('delete-area',obj.uniqueCode)"
           @change-area="$emit('change-area')"
           @default-layout="$emit('default-layout')"
           @update-area="(height)=>{$emit('update-area',{uniqueCode:obj.uniqueCode,height})}"
           :obj="obj">
    <template slot="title-left">
      <div class="xiaoxi-title">
        <div>
          <i class="iconfont iconmessage-2-fill color-span title-span"></i>
          <span class="title-span">{{obj.name}}</span>
        </div>
        <el-button type="text"
                   @click="getPlatformComponentsPath($router, `/noticeMsg/myNotice/index-2&prefix=/admin&name=我的通知消息`)">查看更多</el-button>
      </div>
    </template>
    <template slot="content">
      <el-tabs>
        <el-tab-pane :label="key"
                     v-for="(item,key,index) in xttz"
                     :key="index">
          <template v-if="item.length > 0">
            <div v-for="(subItem,index) in item"
                 :key="index"
                 class="xiaoxi-warp">
              <el-tooltip placement="top"
                          :enterable="false"
                          :content="subItem.content">
                <span :class="{isRead:subItem.isRead}"
                      @click="goXiaoxi(subItem)"><span class="color-span-bg"></span>{{subItem.content}}</span>
              </el-tooltip>
              <span>{{subItem.displayTime?subItem.displayTime.substr(0,10):''}}</span>
            </div>
          </template>
          <div v-else
               class="no-data">
            <img src=""
                 alt="">
            <span>暂无数据</span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
  </dragger>
</template>

<script>
import dragger from './dragger'
import { getPlatformComponentsPath } from '../../util/util'
import { getNotification } from './config'
import { setReadNoticeForHomePage } from '../../api/notice'

export default {
  components: { dragger },
  props: {
    obj: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      getPlatformComponentsPath,
      xttz: []
    }
  },
  methods: {
    getData () {
      getNotification().then(res => {
        this.xttz = res.data.data
      })
    },
    // 参数封装
    toParams (param) {
      var result = ""
      for (let name in param) {
        if (name === 'name') {
          continue
        }
        if (typeof param[name] != 'function') {
          result += "&" + name + "=" + encodeURI(param[name]);
        }
      }
      return result.substring(1)
    },
    goXiaoxi (subItem) {
      setReadNoticeForHomePage([subItem.id]).then(res => {
        // 路由参数
        let urlParamsObj = JSON.parse(subItem.routerParam)
        // 路由地址
        let urlSrc = subItem.routerUrl
        // 区分计划订单
        if (urlParamsObj.name === 'E') {
          urlParamsObj.name = 'E计划订单详情'
          urlSrc = '/planningOrderHumanmade/detail/' + urlParamsObj.id
        } else if (urlParamsObj.name === 'F') {
          urlParamsObj.name = 'F计划订单详情'
          urlSrc = '/planningOrderPurchase/detail/' + urlParamsObj.id
        }
        let urlParams = '?' + this.toParams(urlParamsObj)
        // 跳转
        getPlatformComponentsPath(this.$router, `${urlSrc}${urlParams}&prefix=${subItem.routePrefixFront}&name=${urlParamsObj.name}`)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.no-data {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  img {
    margin-bottom: 10px;
  }
}
/deep/.el-tabs {
  height: 100%;
  .el-tabs__content {
    height: calc(100% - 55px);
    .el-tab-pane {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.xiaoxi {
  &-title {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 24px);
    .title-span {
      font-size: 14px !important;
      &:nth-child(2) {
        font-weight: bold;
        margin-left: 5px;
      }
    }
  }
  &-warp {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #ebebeb;
    & > span:nth-child(1) {
      width: calc(100% - 150px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
      color: #808080;
      position: relative;
      padding-left: 10px;
      cursor: pointer;
      span {
        width: 5px;
        height: 5px;
        border-radius: 100%;
        position: absolute;
        left: 0;
        top: 6px;
      }
    }
    .isRead {
      color: #999 !important;
      span {
        background: #ccc !important;
      }
    }
    & > span:nth-child(2) {
      width: 100px;
      text-align: right;
      color: #999;
    }
  }
}
</style>